<template>
  <div class="app-container">
    <el-card
      class="filter-container"
      shadow="never"
    >
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="handleSearchList()"
          size="small"
        >
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="订单号：">
            <el-input
              v-model="listQuery.orderId"
              class="input-width"
              placeholder="订单编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input
              v-model="listQuery.mobile"
              class="input-width"
              placeholder="收货人姓名/手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="下单时间：">
            <el-date-picker
              class="input-width"
              v-model="listQuery.startTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间"
            >
            </el-date-picker>
            <!--            <el-input v-model="listQuery.createTime" class="input-width" placeholder="下单时间" @change="value"></el-input>-->
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card
      class="operate-container"
      shadow="never"
    >
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
      <el-table
        ref="orderTable"
        :data="list"
        style="width: 100%;"
        v-loading="listLoading"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="订单号"
          width="180"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.orderId }}</template>
        </el-table-column>
        <el-table-column
          label="服务项目"
          width="180"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.goodName }}</template>
        </el-table-column>
        <el-table-column
          label="下单手机号"
          width="180"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.mobile }}</template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          width="120"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.orderStatus | formatStatus }}</template>
        </el-table-column>
        <el-table-column
          label="实付金额"
          width="120"
          align="center"
        >
          <template slot-scope="scope">￥{{ scope.row.orderCash }}</template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          width="120"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.orderPayType | formatPayType }}</template>
        </el-table-column>
        <el-table-column
          label="支付时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.orderPayType==="01"||scope.row.orderPayType==="02" ? scope.row.odrOrderPay&&scope.row.odrOrderPay.payTime||'无': "无" }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleViewOrder(scope.$index, scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              @click="handleDeliveryOrder(scope.$index, scope.row)"
              v-if="scope.row.orderStatus==='002'||scope.row.orderStatus==='003'||scope.row.orderStatus==='004'||scope.row.orderStatus==='008'">退款</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteOrder(scope.$index, scope.row)"
              v-if="scope.row.orderStatus==='000'"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.rows"
        :page-sizes="[5,10,15]"
        :total="total"
      >
      </el-pagination>
    </div>
    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
    <el-dialog
      title="备注"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        ref="reasonForm"
        label-width="150px"
      >
        <el-form-item
          label="请输入退款原因："
          required
        >
          <el-input
            class="input-width"
            v-model="listQuery.note"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, closeOrder, deleteOrder } from '@/api/order'
import { orderList, statusUpdate } from '@/api/orderMs'
import { formatDate } from '@/utils/date'
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog'
const defaultListQuery = {
  page: 1,
  rows: 10
}
export default {
  name: 'OrderList',
  components: { LogisticsDialog },
  data () {
    return {
      row: {},
      dialogVisible: false,
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: false,
      list: null,
      paytime: '',
      total: null,
      operateType: null,
      multipleSelection: [],
      closeOrder: {
        dialogVisible: false,
        content: null,
        orderIds: []
      },
      statusOptions: [
        {
          label: '待付款',
          value: 0
        },
        {
          label: '待发货',
          value: 1
        },
        {
          label: '已发货',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        },
        {
          label: '已关闭',
          value: 4
        }
      ],
      orderTypeOptions: [
        {
          label: '正常订单',
          value: 0
        },
        {
          label: '秒杀订单',
          value: 1
        }
      ],
      sourceTypeOptions: [
        {
          label: 'PC订单',
          value: 0
        },
        {
          label: 'APP订单',
          value: 1
        }
      ],
      operateOptions: [
        {
          label: '批量发货',
          value: 1
        },
        {
          label: '关闭订单',
          value: 2
        },
        {
          label: '删除订单',
          value: 3
        }
      ],
      logisticsDialogVisible: false
    }
  },
  mounted () {
    this.getList()
  },
  filters: {
    formatCreateTime (time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatPayType (value) {
      if (value === '00') {
        return '线下支付'
      } else if (value === '01') {
        return '线上支付'
      } else {
        return '线上支付宝'
      }
    },
    formatSourceType (value) {
      if (value === 1) {
        return 'APP订单'
      } else {
        return 'PC订单'
      }
    },
    formatStatus (value) {
      if (value === '000') {
        return '待支付'
      } else if (value === '001') {
        return '已取消'
      } else if (value === '002') {
        return '待服务'
      } else if (value === '003') {
        return '服务中'
      } else if (value === '004') {
        return '已完成'
      } else if (value === '005') {
        return '已退款'
      } else if (value === '007') {
        return '退款中'
      } else if (value === '008') {
        return '退款失败'
      } else {
        return '已评价'
      }
    }
  },
  methods: {
    value (val) {
      console.log(val, this.listQuery)
      this.listQuery.createTime = val
    },
    handleConfirm () {
      const data = {
        orderId: this.row.orderId,
        preStatus: this.row.orderStatus,
        targetStatus: '007',
        flowTime: this.row.statusUpdateTime,
        remark: this.row.note,
        payStatus: '01',
        orderCash: this.row.orderCash,
        odrOrderRefund: {
          caseReturnResult: this.row.orderCash,
          caseReturnStatus: this.row.caseReturnStatus
        }
      }
      statusUpdate(data).then((response) => {
        this.$message({
          message: '退款成功！',
          type: 'success',
          duration: 1000
        })
        this.getList()
      })
      this.dialogVisible = false
    },
    handleResetSearch () {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    handleSearchList () {
      console.log(this.listQuery)
      this.listQuery.page = 1
      this.getList()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleViewOrder (index, row) {
      this.$router.push({
        path: '/order-ms/reviewOrder',
        query: { id: row.orderId, goodId: row.goodId }
      })
      // console.log(row.orderId, index)
    },
    handleCloseOrder (index, row) {
      this.closeOrder.dialogVisible = true
      this.closeOrder.orderIds = [row.id]
    },
    handleDeliveryOrder (index, row) {
      // const listItem = this.covertOrder(row)
      this.row = row
      this.dialogVisible = true
    },
    handleViewLogistics (index, row) {
      this.logisticsDialogVisible = true
    },
    handleDeleteOrder (index, row) {
      const ids = row
      // ids.push(row.id)
      this.deleteOrder(ids)
      console.log(1, row, 2, ids)
    },
    handleBatchOperate () {
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: '请选择要操作的订单',
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (this.operateType === 1) {
        // 批量发货
        const list = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].status === 1) {
            list.push(this.covertOrder(this.multipleSelection[i]))
          }
        }
        if (list.length === 0) {
          this.$message({
            message: '选中订单中没有可以发货的订单',
            type: 'warning',
            duration: 1000
          })
          return
        }
        this.$router.push({
          path: '/oms/deliverOrderList',
          query: { list: list }
        })
      } else if (this.operateType === 2) {
        // 关闭订单
        this.closeOrder.orderIds = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.closeOrder.orderIds.push(this.multipleSelection[i].id)
        }
        this.closeOrder.dialogVisible = true
      } else if (this.operateType === 3) {
        // 删除订单
        const ids = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.deleteOrder(ids)
      }
    },
    handleSizeChange (val) {
      this.listQuery.page = 1
      this.listQuery.rows = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCloseOrderConfirm () {
      if (this.closeOrder.content == null || this.closeOrder.content === '') {
        this.$message({
          message: '操作备注不能为空',
          type: 'warning',
          duration: 1000
        })
        return
      }
      const params = new URLSearchParams()
      params.append('ids', this.closeOrder.orderIds)
      params.append('note', this.closeOrder.content)
      closeOrder(params).then((response) => {
        this.closeOrder.orderIds = []
        this.closeOrder.dialogVisible = false
        this.getList()
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
      })
    },
    getList () {
      this.listLoading = true
      // console.log(11111)
      orderList(this.listQuery)
        .then((response) => {
          console.log(2, response.result)
          this.listLoading = false
          this.list = response.result
          // console.log(response.result.odrOrderPay);
          if (response.result.odrOrderPay) {
            this.paytime = response.result.odrOrderPay.paytime
          } else {
            this.paytime = ''
          }

          this.total = response.totalCount
        })
        .catch((err) => console.log(err))
    },
    deleteOrder (ids) {
      this.$confirm('是否要取消该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          orderId: ids.orderId,
          preStatus: ids.orderStatus,
          targetStatus: '001',
          flowTime: ids.statusUpdateTime,
          remark: ids.note
        }
        statusUpdate(data).then((response) => {
          this.$message({
            message: '取消成功！',
            type: 'success',
            duration: 1000
          })
          this.getList()
        })
      })
    },
    covertOrder (order) {
      const address =
        order.receiverProvince +
        order.receiverCity +
        order.receiverRegion +
        order.receiverDetailAddress
      const listItem = {
        orderId: order.id,
        orderSn: order.orderSn,
        receiverName: order.receiverName,
        receiverPhone: order.receiverPhone,
        receiverPostCode: order.receiverPostCode,
        address: address,
        deliveryCompany: null,
        deliverySn: null
      }
      return listItem
    }
  }
}
</script>
<style scoped>
/*.input-width {*/
/*  width: 203px;*/
/*}*/
</style>
